<template>
  <div class="app-container">
    <div class="table-tools">
      <div>
        <el-button :icon="Plus" type="primary" @click="addArticlle">
          新增
        </el-button>
        <!-- <el-button :icon="Delete" @click="deletes">删除</el-button> -->
      </div>
    </div>
    <el-table :data="articleList" border lazy>
      <el-table-column label="文章ID" align="center" width="90px" prop="id" />
      <el-table-column label="文章封面" align="center" width="140px">
        <template #default="scope">
          <articleCover v-model="scope.row.cover" width="110px" height="75px" />
        </template>
      </el-table-column>
      <el-table-column
        label="文章标题"
        align="center"
        width="250px"
        prop="heading"
        sortable
        show-overflow-tooltip
      />
      <el-table-column
        label="文章作者"
        min-width="120px"
        align="center"
        prop="author"
        sortable
      />
      <el-table-column
        label="文章类别"
        align="center"
        min-width="140px"
        prop="categoryId"
        sortable
      >
        <template #default="scope">
          {{ getCategory(scope.row.categoryId) || "未知" }}
        </template>
      </el-table-column>
      <el-table-column
        label="文章查阅次数"
        align="center"
        min-width="120px"
        prop="readTime"
        :formatter="readTimeFormat"
      />
      <el-table-column
        label="文章上传时间"
        align="center"
        min-width="180px"
        prop="uploadTime"
        :formatter="dateTimeFormat"
      />
      <el-table-column
        label="文章修改时间"
        align="center"
        min-width="180px"
        prop="lastModifyTime"
        :formatter="dateTimeFormat"
      />
      <el-table-column label="操作" align="center" fixed="right" width="170px">
        <template #default="scope">
          <el-button @click="articleDetailClick(scope.row)">详情</el-button>
          <el-button @click="deleteArticle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next, total"
        :pager-count="5"
        :total="pageParam.total"
        :default-page-size="pageParam.pageSize"
        v-model:current-page="pageParam.page"
        background
        @current-change="pageChange"
      />
    </div>
    <articleDetail
      ref="articleRef"
      :category="categoryList"
      @on-save="getArticleList"
    />
  </div>
</template>

<script setup lang="ts">
import { Search, Delete, Plus } from "@element-plus/icons-vue";
import articleAPI, { type ArticleResult } from "@/api/article";
import categoryAPI, { type CategoryResult } from "@/api/category";
import articleCover from "@/components/articleCover/index.vue";
import articleDetail from "./components/article-detail.vue";
import { backtopClick } from "@/utils/index";

const articleList = ref<ArticleResult[]>();

const pageParam = ref<PageQuery & pageCount>({
  page: 1,
  pageSize: 10,
  total: 0,
});
const categoryList = ref<CategoryResult[]>();

//数据格式化
const readTimeFormat = (row: any, column: any, cellValue: number) => {
  return cellValue + "次";
};
const dateTimeFormat = (row: any, column: any, cellValue: string) => {
  return cellValue.replace("T", " ");
};

//类别功能
const getCategoryList = async () => {
  const data = await categoryAPI.getCategoryList({ page: 1, pageSize: 999 });
  categoryList.value = data.rows;
};

const getCategory = (id: number) => {
  const filter = categoryList.value?.filter((item: CategoryResult) => {
    return item.id === id;
  });
  return filter ? filter[0].name : null;
};

//文章列表功能
const getArticleList = async () => {
  const result = await articleAPI.getArticle(pageParam.value);
  articleList.value = result.rows;
  pageParam.value.total = result.total;
};

//分页功能
const pageChange = () => {
  getArticleList();
  backtopClick();
};

//删除功能
const deleteArticle = async (id: number) => {
  await articleAPI.deleteArticle({ id });
  getArticleList();
  ElMessage.success("删除文章成功");
};

//详情功能
const articleRef = ref<InstanceType<typeof articleDetail>>();
const articleDetailClick = (data: ArticleResult) => {
  articleRef.value?.propFromData(data);
  articleRef.value?.closeClick();
};

//新增功能
const addArticlle = () => {
  articleRef.value?.propFromData();
  articleRef.value?.closeClick();
};

onMounted(() => {
  articleList.value === undefined && getArticleList();
  getCategoryList();
});
</script>

<style lang="scss" scoped></style>
